<template>

	<scroll-view v-if="showFlag" class="boxW" scroll-y="true" @scrolltolower="loadMore" refresher-enabled="true"
		:refresher-triggered="shanglaFlag" @refresherrefresh="reload">
		<template v-for="item in data">
			<GoodsItem class="goodsItem" :name="item.goodsname" :price="item.price" :img="item.img"></GoodsItem>
		</template>
		<uni-load-more :status="moreType"></uni-load-more>
	</scroll-view>

	<view v-else class="gjp">

	</view>

</template>

<script setup>
	import {
		ref,
		watch,
		defineProps,
		reactive
	} from "vue"
	import {
		getGoodSList
	} from "../../../api/index.js"
	import GoodsItem from "../../../components/goods/index.vue"
	const props = defineProps({
		ID: {
			type: Number,
			default: 0
		}
	})
	const showFlag = ref(false)
	watch(() => props.ID, () => {
		console.log(props.ID)
		if (props.ID != 0) {
			showFlag.value = true
			console.log("zoule 28")
			// 调接口
			reload()
		} else {
			showFlag.value = false
		}

	}, {
		immediate: true
	})
	const page = ref(1)
	const data = ref([])
	const count = ref(0)
	function getList() {
		getGoodSList({
			fid: props.ID,
			pageIndex: page.value
		}).then(e => {
			console.log(e, 35)
			// data.value = e.data.list
			for(let i=0;i<e.data.list.length;i++){
				data.value.push(e.data.list[i])
			}
			count.value = e.data.count
			shanglaFlag.value = false
			if(data.value.length===e.data.count){
				moreType.value = "no-more"
			}else{
				moreType.value = "more"
			}
		})
	}

	const moreType = ref("more")
	const showData = reactive([])
	let index = 0
	const shanglaFlag = ref(false)

	function reload() {
		shanglaFlag.value = true
		console.log("上拉刷新")
		page.value=1
		data.value.splice(0,data.value.length)
		getList()
	}

	function loadMore() {
		moreType.value = "loading"
		
		if(data.value.length<count.value){
			page.value++
			getList()
		}else{
			moreType.value = "no-more"
		}
		// setTimeout(()=>{
		// 	console.log(showData,17)
		// 	// 说明数据要加载完了
		// 	if(index+6>data.length){
		// 		for(let i=index;i<data.length;i++){
		// 			showData.push(data[i])
		// 		}
		// 		moreType.value = "no-more"
		// 	}else{
		// 		for(let i=index;i<index+6;i++){
		// 			showData.push(data[i])
		// 		}
		// 		index = index+6
		// 	}
		// },2000)
	}
</script>

<style scoped>
	.gjp {
		background-color: aqua;
		height: 50rpx;
	}

	.boxW {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		border: 1px solid red;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.goodsItem {
		height: 600rpx;
		width: 50%;
		border: 1rpx solid red;
		margin-top: 10rpx;
		overflow: hidden;
	}
</style>